
<template>
  <div class="page">
    <SplitPane
        direction="row"
        :min="20"
        :max="80"
        :triggerLength="20"
        v-model:paneLengthPercent="paneLengthPercent"
>
      <template v-slot:one>
        <div>
          区域一
        </div>
      </template>

      <template v-slot:two>
        <div>
          区域二
        </div>
      </template>

    </SplitPane>
  </div>

</template>
<script setup>
import SplitPane from '@/components/SplitPane'
import {ref} from "vue";
const paneLengthPercent=ref(50)
</script>


<style scoped lang="scss">
.page {
  height: 100px;
  padding: 10px;
}
</style>
